<template>
    <base-breadcrumb>
        <template>
            <a-card class="mb20">
                <div>
                    <a-steps progress-dot :current="0">
                        <a-step title="步骤一" description="基本信息填写" />
                        <!-- <a-step title="步骤二" description="各部门填写资料" /> -->
                        <a-step title="步骤二" description="资料汇总" />
                        <a-step title="完成" description="上传签字盖章后的资料" />
                    </a-steps>
                </div>

                <titleName title="基础信息填写" class="title-style"></titleName>
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                    <a-row :gutter="24">
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="所属分公司：" prop="branchComId">
                                <SelectSubCompany placeholder="请选择" v-model="form.branchComId"></SelectSubCompany>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="所属项目：" prop="projectId">
                                <SelectProject
                                    placeholder="请选择"
                                    v-model="form.projectId"
                                    :form="form"
                                    :isClear="id == ''"
                                    keyValue="branchComId"
                                ></SelectProject>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="分包商名称：" prop="subContractorId">
                                <SelectSubcontractor
                                    placeholder="请选择"
                                    v-model="form.subContractorId"
                                    :form="form"
                                    :isClear="id == ''"
                                    keyValue="projectId"
                                ></SelectSubcontractor>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="名称：" prop="name">
                                <BaseInput placeholder="请输入" v-model="form.name" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="编号" prop="number">
                                <BaseInput placeholder="请输入" v-model="form.number" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="计量月份：" prop="measureMonth">
                                <a-month-picker
                                    @change="(date, dateString) => getTime(date, dateString, 'form', 'measureMonth')"
                                    placeholder="请选择"
                                    v-model="form.measureMonth"
                                ></a-month-picker>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="施工范围：" prop="constructionRange">
                                <BaseTextarea placeholder="请输入" v-model="form.constructionRange" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="分包上报完成形象部位：" prop="completePart">
                                <BaseTextarea style="width: 100%" :maxLength="1000" placeholder="请输入" v-model="form.completePart" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
            <div class="tool-btns mb20 page-btn-right-top">
                <a-button
                    :loading="loading.DELETE"
                    v-if="id != '' && form.auditStatus == 'DRAFT'"
                    type="danger"
                    @click="deleteDraft()"
                    >删除草稿</a-button
                >
                <a-button :loading="loading.DRAFT" class="ml20" type="primary" @click="submitForm('DRAFT')"
                    >保存草稿</a-button
                >
                <a-button :loading="loading.SUBMITTED" class="ml20" type="primary" @click="submitForm('SUBMITTED')"
                    >提交</a-button
                >
                <a-button class="ml20" type="primary" @click="closeForm()">关闭</a-button>
            </div>
        </template>
    </base-breadcrumb>
</template>
<script>
import { addStepOne, getStepOneDetail, delStepOne, updateStepOne } from '@/api/businessAffairs/sml'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 分公司
import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分公司
export default {
    name:'a'+Date.now(),
    components: {
        SelectSubCompany,
        SelectProject,
        SelectSubcontractor,
    },
    data() {
        return {
            form: {},
            id: '',
            loading: {
                DELETE: false,
                DRAFT: false,
                SUBMITTED: false,
            },
            rules: {
                name: [{ required: true, message: '请输入名称' }],
                branchComId: [{ required: true, message: '请选择分公司' }],
                projectId: [{ required: true, message: '请选择项目' }],
                subContractorId: [{ required: true, message: '请选择分包商名称' }],
                number: [{ required: true, message: '请输入编号' }],
                constructionRange: [{ required: true, message: '请输入施工范围' }],
                measureMonth: [{ required: true, message: '请选择月份' }],
                completePart: [{ required: true, message: '分包上报完成形象部位' }],
            },
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
            console.log(this.id)
            this.getStepOne()
        }
    },

    methods: {
        getTime(date, dateString, type, name) {
            this[type][name] = dateString
        },
        getStepOne() {
            let params = {
                id: this.id,
            }
            getStepOneDetail(params).then((res) => {
                this.form = res.data
            })
        },

        deleteDraft() {
             let that = this
            this.$confirm({
                title: '温馨提示',
                content: '确定是否删除数据？',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    return delStepOne({ id: that.id }).then((res) => {

                        that.$message.success('删除成功')
                        that.closeForm()
                    })
                },
                onCancel() {},
            })
        },
        // 提交表单
        submitForm(auditStatus) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading[auditStatus] = true
                    this.form.auditStatus = auditStatus
                    if (this.id == '') {
                        addStepOne(this.form).then((res) => {
                            this.loading[auditStatus] = false
                            this.$message.success('提交成功')
                            this.closeForm()
                        })
                    } else {
                        updateStepOne(this.form).then((res) => {
                            this.loading[auditStatus] = false
                            this.$message.success('修改成功')
                            this.closeForm()
                        })
                    }
                } else {
                  this.$message.warning("请填写完所有必填项信息")
                }
            })
        },
        // 关闭表单
        closeForm() {
            this.$multiTab.close(this.$route.fullpath)
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.tool-btns {
    display: flex;
    justify-content: flex-end;
    @{deep} .ant-btn + .ant-btn {
        margin-left: 12px;
    }
}
.step-text {
    .ant-steps-item-title {
        width: 168px;
    }
}
.check-box {
    .ant-checkbox-group {
        margin-top: 1.5%;
        display: flex;
        justify-content: space-between;
    }
    .ant-checkbox-group-item {
        position: static !important;
    }
}
.radio-box {
    .ant-radio-wrapper {
        position: static !important;
    }
    .ant-radio-group {
        margin-top: 3% !important;
        display: flex;
    }
}

.foot-btn {
    display: flex;
    justify-content: flex-end;
}
</style>
